import React from 'react';
import './Cate.scss'
import axios from 'axios'
import withRouter from '../../router/withRouter'

class Cate extends React.Component {
    componentDidMount() {
        axios.get('/douyu/api/RoomApi/game')
            .then((res) => {
                this.setState({
                    cateList: res.data.data
                })
            })
        setInterval(() => {
            if ((document.documentElement.scrollHeight - document.documentElement.clientHeight) > document.documentElement.scrollTop + 200) {
                //未到底
                // console.log('未到底');
            } else {
                this.setState({
                    limit: this.state.limit + 20
                })
            }
        }, 2000)

    }
    state = {
        cateList: [],
        limit: 20
    }
    render() {
        let { cateList, limit } = this.state;
        let { navigate } = this.props;
        let arr = cateList.splice(0, limit)
        console.log(cateList);
        return (
            <div className='Cate'>
                {cateList.length !== 0 &&
                    <ul>
                        {arr.map(item => {
                            return <li key={item.cate_id} onClick={() => {
                                navigate(`/cateinfo?cate_id=${item.cate_id}`)
                            }}>
                                <img src={item.game_icon} alt="" />
                                <p>{item.game_name}</p>
                            </li>
                        })}
                    </ul>
                }
            </div>
        )
    }
}
export default withRouter(Cate)